﻿<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: 微软雅黑, 仿宋体;
            word-spacing: 4px;
            font-size: 16px;
        }
        
        body {
            width: 100%;
            height: 100%;
            min-width: 1268px;
            background-color: #f5f3f0;
            overflow-x: hidden;
            overflow-y: hidden;
            position: relative;
            border: solid 1px green
        }
        
        #panel {
            width: 100%;
            height: 70%;
            overflow: hidden;
            position: relative;
            z-index: 1;
            border: solid 1px red
        }
        
       
        #mapContainer {
            position: absolute;
            top: 0;
            left: 0;
          
        }
        
        #mapContainer div {
            position: absolute;
            width: 256px;
            height: 256px;
            background: 0 0 no-repeat;
        }
        
        #mapContainer img {
            position: absolute;
            z-index: 4;
            cursor: default;
        }
        
        #mapContainer .devMsg {
            position: absolute;
            width: 500px;
            height: 260px;
            z-index: 6;
            background: url('../img/net/msgBack.gif') 0 0 repeat;
            overflow: auto;
            border: 1px solid gray;
        }
        
         #canvasId {
            background: transparent;
            z-index: 2;
            position: absolute;
            left: 0;
            top: 0;
        }
        
    </style>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/tilemap3.js"></script>
    <script>
        $(document).ready(function () {
            mapInit(118.8, 32, 3);
            addDev($("<img src='../img/K.png'/>"), 118.8, 32);
        });
    </script>

</head>

<body>
    <div style="width:1000px;height:700px;" id="panel" ondblclick='zoomInMap(event);return false;' onmouseup='endDragMap(event);return false;' onmousemove='dragMap(event);return false;' onmousedown='startDragMap(event);return false;' oncontextmenu='zoomOutMap(event);return false;'>
        <div id="mapContainer"></div>
    </div>
</body>

</html>